<template>
	<view>
		<view class="Topbg">

			<!-- 顶部滚动  搜索 -->
			<view class="noticerow">
				<swiper vertical="true" :autoplay="true" class="noticeswiper">
					<swiper-item v-for="(item,index) in noticeList" :key="index">
						<u-image src="/static/Vector.png" width="20rpx" height="20rpx"></u-image>
						<view class="u-margin-left-20 u-font-sm" style="color: #FFFFFF;">
							<view style="width: 300rpx;" class="u-line-1">恭喜{{item.nickname}}</view>
							<view>获得话费抵扣券</view>
						</view>
					</swiper-item>
				</swiper>
				<view style="width: 300rpx;display: flex;align-items: center;">
					<u-search placeholder="搜索商品" v-model="keyword" :animation="true" :action-style="{color:'#fff'}"
						@focus="focus" @blur="blur" @click="search" :disabled="true"></u-search>
					<view class="" v-if="ismore" @click="Clknew">
						<u-icon name="bell" color="#fff" size="50" :custom-style="{marginLeft:'20rpx'}"></u-icon>
					</view>

				</view>
			</view>


			<!-- banner -->
			<view class="banner">
				<u-swiper :list="banner" height="350" name="cover" @click="clkbanner"></u-swiper>
			</view>


			<!-- 资讯滚动 -->
			<view class="new">
				<u-image src="/static/newtitle.png" width="146rpx" height="47rpx"></u-image>
				<u-notice-bar mode="vertical" :list="newList" type="none" color="#333" :volume-icon='false'
					:more-icon="true" @click="zixun" @getMore="zixun"></u-notice-bar>

			</view>

			<u-gap height="10" bg-color="#f1f1f1"></u-gap>



			<!-- 分类宫格 -->
			<u-grid :col="5" :border="false">
				<u-grid-item v-for="(item,index) in classList" :key="index" index="item" @click="clickGrid(item,index)">
					<u-image :src="item.cover" width="88rpx" height="88rpx"></u-image>
					<view class="grid-text">{{item.classifyName}}</view>
				</u-grid-item>
			</u-grid>

			<view class="muto_title" v-if="isShow">
				<u-image src="/static/muto_title.png" width="148" height="52" mode="widthFix"></u-image>
			</view>

			<!-- 功能调转 -->
			<view class="modeRow"  v-if="isShow">
				<view v-for="(item,index) in modeList" :key="index" class="u-margin-bottom-30" @click="cmodeList(item)">
					<u-image :src="item.img" width="330" height="180" mode="widthFix"></u-image>
				</view>
			</view>

			<!-- 推荐 -->
			<view class="muto_title">
				<u-image src="/static/tuijian.png" width="148" height="52" mode="widthFix"></u-image>
			</view>

			<!-- 商品 -->
			<view class="modeRow">
				<view v-for="(item,index) in list" :key="index" class="list" @click="go_detail(item)">
					<u-image :src="item.cover" width="340" height="340" ></u-image>

					<view class="listBottom">
						<view class="title u-line-2" style="height: 75rpx;">
							{{item.goodsName}}
						</view>
						<view class="listDes">
							<view class="price" style="font-size: 24rpx;">拼团价:￥{{item.ptPrice}}</view>
							<u-icon name="shopping-cart" color="#FF6450" size="36"></u-icon>
						</view>

					</view>
				</view>
			</view>
			
			<view style="position: fixed;right: 0;bottom: 100rpx;width: 120rpx;height: 120rpx;border-radius: 100%;background:#f6f6f6;display: flex;justify-content: center;" v-if="islogin">
				<view style="margin-top: 15rpx;">
					<u-icon name="server-man" color="#628DFF" size="60" ></u-icon>
					<view style="font-size: 24rpx;color: #999;text-align: center;">客服</view>
				</view>
				
				<button open-type="contact" class="custom-btn"></button>
			</view>
			
			<u-loadmore :status="status" />

			<!-- 领券弹框 -->
			<couponPoup ref="coupond"></couponPoup>


		</view>
	</view>
</template>

<script>
	import couponPoup from '../../components/couponPoup.vue';
	import url from '@/common/baseUrl.js';
		
	export default {
		components: {
			couponPoup
		},
		data() {
			return {
				imagesurl: url.imageUrl,
				iscouponPoup: false, //优惠券摊款

				keyword: '',
				ismore: true,
				noticeList: [],

				banner: [

				],

				newList: [],
				newListarr: [],


				classList: [],

				modeList: [{
					img: url.imageUrl+"/images/mode_1.png",
					url: "../../pages/buyCoupond/index"
				}, {
					img:"/static/moblie_banner.png",
					url: "../../pages/teamAtive/index"

				}, {
					img: url.imageUrl+"/images/kanjian.png",
					url: "../../pages/kanjia/index"
					
				}, {
					img: url.imageUrl+"/images/mode_2.png",
					url: "../../pages/getJinfen/index"
				}, ],

				list: [],

				page: 1,
				status: 'loadmore',
				islogin:false,
			    isShow:true

			}
		},
		onLoad() {
			this.getAware()
			this.getBanner()
			this.getNotice()
			this.getClassify()
			this.getGoods()


		},
		onShow() {
			this.getCoupond()
			this.getConfig()
			
			if(this.$store.state.userInfo){
				this.islogin=true
			}
		},
		onReachBottom() {
			if (this.status == 'nomore') {

			} else {
				this.getGoods()
			}

		},
		methods: {
			getConfig(){
			this.$u.post('/api/index/getConfig', {
			
			}, {}).then(res => {
				 if(!Number(res.data.appAuditState)){
					 this.isShow=false
				 }
			     
			}).catch(err => {})
			},
			
			
			clkbanner(item) {
				var id = this.banner[item].link
				
				console.log(id.indexOf("http"))
				if(id.indexOf("http")==-1){
					uni.navigateTo({
						url: id
					})
				}else{
					uni.navigateTo({
						url: "../web/index?src="+id
					})
				}
				
				

			},
			search() {
				uni.switchTab({
					url: '/pages/shop/index'
				})
			},
			getCoupond() {
				if(!this.$store.state.userInfo){		
					
				  return
				}
				if (this.$store.state.userInfo.first) {
					this.$refs.coupond.iscouponPoup = true
				}
		

			},


			// 获取中奖纪录
			getAware() {
				this.$u.post('/api/index/winLog', {

				}, {}).then(res => {
					this.noticeList = res.data

				}).catch(err => {})
			},

			// 获取banner
			getBanner() {
				this.$u.post('/api/index/banner', {

				}, {}).then(res => {
					this.banner = res.data

				}).catch(err => {})
			},

			// 公告
			getNotice() {
				this.$u.post('/api/index/notice', {

				}, {}).then(res => {
					var data = res.data
					this.newListarr = data
					var arr = []
					data.forEach(item => {
						arr.push(item.title)
					})
					this.newList = arr


				}).catch(err => {})
			},
			zixun(){
			  uni.navigateTo({
			  	url:"/pages/new/index"
			  })
			},

			//分类
			getClassify() {
				this.$u.post('/api/index/goodsClassify', {
					type: 1
				}, {}).then(res => {
					var arr = []
					for (var i = 0; i < 4; i++) {
						arr.push(res.data[i])

					}
					this.classList = arr
					this.classList.push({
						cover: "/static/shopClass.png",
						classifyName: "更多"
					})

				}).catch(err => {})
			},


			// 获得商品
			getGoods() {
				this.$u.post('/api/index/goods', {
					goods_type: 1,
					goods_classify_id: '',
					page: this.page,
					top:1
				
				}, {}).then(res => {
					var resList = res.data;
					if (this.page == 1) {
						this.list = []
					}
					if (resList.length > 9) {
						this.status = 'loadmore'
						this.page = this.page + 1
					} else {
						this.status = 'nomore'
					}
					this.list = this.list.concat(resList)
					this.loading = false
				}).catch(err => {})
			},

			Clknew() {
				console.log(111)
				uni.navigateTo({
					url: "../../pages/my/new"
				})
			},
			cmodeList(item) {
				console.log(item)
				uni.navigateTo({
					url: item.url
				})
			},
			focus() {
				this.ismore = false
			},
			blur() {
				this.ismore = true
			},
			clickGrid(item, index) {
				if (item.classifyName == "更多") {
					uni.switchTab({
						url: "../shop/index"
					})
				} else {
					this.$store.state.classCurrent = index + 1
					uni.switchTab({
						url: "../shop/index"
					})

				}


			},
			go_detail(item) {
				uni.navigateTo({
					url: "../../pages/shop/detail?id=" + item.id
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;

	}

	.Topbg {
		height: 300rpx;
		background: #628DFF;

		border-radius: 0rpx 0rpx 50% 50%;
	}

	.noticerow {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
	}


	.noticeswiper {
		height: 75rpx;

		width: 300rpx;

		swiper-item {
			display: flex;
		}
	}

	.banner {
		width: 690rpx;

		margin: 10rpx auto 20rpx auto;


	}

	.u-notice-bar-wrap {
		width: 550rpx;
	}

	.new {
		width: 690rpx;
		margin: auto;
		display: flex;
		align-items: center;
		padding-bottom: 20rpx;
	}


	.muto_title {
		display: flex;
		justify-content: center;
		margin: 10rpx 0  40rpx 0;
	}

	.modeRow {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 690rpx;
		margin: auto;
	}

	.list {
		background: #FFFFFF;
		box-shadow: 0px 4rpx 6rpx rgba(209, 209, 209, 0.26);
		border-radius: 20rpx;
		width: 340rpx;
		margin-bottom: 20rpx;

		.listBottom {
			padding: 20rpx;

			.listDes {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
			}


			.price {
				font-size: 36rpx;
				color: #FF6450;
			}
		}
	}
</style>
